<template>
  <el-menu :default-active="active" class="el-menu-vertical-demo" background-color="#26344b" active-text-color="#ffd04b" text-color='#e0dfdf' router>
    <el-menu-item-group>
      <div v-for="(item,index) in menuItem" :key="index">
        <el-menu-item :index="index.toString()" :route='{path:item.path}' v-if="!item.children">
          <div class="text">
            <i :class="item.icon"></i>
            {{item.name}}
          </div>
        </el-menu-item>

        <el-submenu :index="index.toString()" v-else>
          <template #title>
            <div class="text">
              <i :class="item.icon"></i>
              <span>{{item.name}}</span>
            </div>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="index+'-'+chindex" v-for="(item,chindex) in item.children" :key="chindex" :route='{path:item.path}'>
              <div class="childrentext">
                {{item.name}}
              </div>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </div>
    </el-menu-item-group>
  </el-menu>
</template>

<script lang='ts'>
import { reactive, toRefs } from "vue";
import $router from "@/router/index";
import { NavigationGuardNext, RouteLocationNormalized } from "vue-router";
const adminRole: any[] = [
  {
    path: "/index",
    name: "数据汇总",
    icon: "iconfont icon-shouyeshouye",
  },
  {
    path: "/user",
    name: "会员管理",
    icon: "iconfont icon-huiyuanguanli",
  },
  {
    name: "渠道广告",
    icon: "icon-qudaoqushiduibifenxi iconfont",
    path: "/jobmanage",
  },
  {
    path: "/job",
    name: "兼职管理",
    icon: "iconfont icon-xiaoxijianzhi",
  },
  {
    path: "/company",
    name: "企业管理",
    icon: "iconfont icon-qiye",
  },
  {
    path: "/adv",
    name: "广告管理",
    icon: "iconfont icon-guanggaoshezhi",
  },
  {
    path: "/admin",
    name: "用户管理",
    icon: "iconfont icon-yonghu",
  },
];
const userRole: any[] = [
  {
    path: "/index",
    name: "数据汇总",
    icon: "iconfont icon-shouyeshouye",
  },
  {
    path: "/user",
    name: "会员管理",
    icon: "iconfont icon-huiyuanguanli",
  },
  {
    name: "渠道广告",
    icon: "icon-qudaoqushiduibifenxi iconfont",
    path: "/jobmanage",
  },
];

export default {
  setup() {
    const data = reactive({
      active: "0",
    });

    const routeData = reactive({
      menuItem:
        JSON.parse(localStorage.getItem("userdata") as string).data.name ==
        "admin"
          ? adminRole
          : userRole,
    });

    routeData.menuItem.forEach((item, i) => {
      const path = $router.currentRoute.value.path;
      if (item.path == path) {
        data.active = i.toString();
      }
    });

    return {
      ...toRefs(data),
      ...toRefs(routeData),
    };
  },
};
</script>
<style lang="less" scoped>
.el-menu-vertical-demo {
  height: 100%;
}
.text {
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  i {
    width: 17px;
  }
}
.el-menu-item {
  min-width: 199px !important;
}
.childrentext {
  text-align: right;
  margin: 0 auto;
  i {
    width: 17px;
  }
}
</style>